<script setup>
import { ref, reactive, toRef, onMounted } from 'vue'
import { toRaw } from '@vue/reactivity'
import MyIcon from '@/components/my-icon/index.vue'
import { Search } from '@element-plus/icons-vue'
import {postLostList} from '@/api'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
import labels from '@/components/app/label.vue'
const TestRef = ref(null)
const resetapi = ()=>{
	dateValue1.value=[],
	dateValue2.value=[]
	staffData.value=[]
	tagData.value=[]
	getData(1)
}
const showLabels = ()=>{
  // console.log('111')
  // tableselect.value=true
  var data = {
    show:true,
    type:2
  }
  TestRef.value.tableshow(data)
}
const tagData = ref([])
const labeldataapi=(val)=>{
	var arr = []
	console.log(val.list)
	val.list.forEach(item=>{
		console.log(toRaw(item))
		arr.push(toRaw(item))
	})
	tagData._value = arr
	console.log(tagData.value)
	handleRefresh()
}

const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const staffData = ref([])
const chooseStaff = () => {
  dialogVisible.value = true
  chooseDialogue.value.show('staff', staffData.value)
}
const getChooseData = (val) => {
  console.log(val, '数据回显')
  staffData.value = val
  handleRefresh()
}
const chooseDialogue = ref(null)
import Detail1 from '@/pages/wework/customer/detail/index.vue'
const detail1 = ref(null)
const showDetail = (id)=>{
	setTimeout(()=>{
		dialogVisible.value = false
  	detail1.value.show(id)
	},5)
}
const dialogVisible = ref(true)
const input1 = ref('')
const dateValue1 = ref()
const dateValue2 = ref()
const dialogTableVisible = ref()
const radioValue = ref('1')
const changeClick = () => {
	console.log(radioValue.value)
}
const preservation = () => {
	dialogTableVisible.value = false
}

const dialogClick = () => {

	dialogTableVisible.value = true
}
const changeTime = (e) => {
	console.log(e)
}
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const getData = (val)=>{
	if(val){
		page.value = val
	}
	var lossTime = []
	if (dateValue1.value){
		lossTime = dateValue1.value
	}

	var lossTime = [],addTime = [],tags =[],staffs=[]
	if (dateValue1.value){
		lossTime = dateValue1.value
	}
	if (dateValue2.value){
		addTime = dateValue2.value
	}
	if (staffData.value){
		staffData.value.forEach(item=>{
			staffs.push(item.id)
		})
	}
	if (toRaw(tagData.value)){
		console.log(toRaw(tagData.value),'tuouiouio')
		toRaw(tagData.value).forEach(item=>{
			tags.push(item.tag_id)
		})
	}
	
    postLostList({
				page:page.value,size:10,
				type:2,lossing_time:lossTime,
				add_time:addTime,tags:tags,staffs:staffs
    }).then((res) => {
    // console.log(res.data)
      total.value = res.data.count
	    tableData.value = res.data.item
	// console.log(aothList)
    })
}
getData()

</script>
<template>
<div>

	<div class="allStyle" style="margin-top:16px" v-if="dialogVisible">
		<div class="centerSelectStyle">
			<div class="centerSelectChild">
				<div class="timeChild" style="margin-left: 0">
					<span class="timeChild-label">所属客服:</span>
					<span v-if="isRefresh">
  <span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-if="staffData.length>2">
    <span class="app-flex-left">
      <el-avatar v-if="staffData[0].avatar" class="cho-margin" shape="square" :size="30" :src="staffData[0].avatar" />
      <span>{{ staffData[0].name }}等{{staffData.length}}个账号</span>
    </span>
    <el-icon>
      <ArrowDown />
    </el-icon>
  </span>
  <span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-else>
    <span class="app-flex-left" v-for="(item,index) in staffData" :key="index">
      <el-avatar v-if="item.avatar" class="cho-margin" shape="square" :size="30" :src="item.avatar" />
      <span>{{ item.name }}</span>
    </span>
    <span v-if="staffData.length==0"> </span>
    <el-icon>
      <ArrowDown />
    </el-icon>
  </span>
</span>
				</div>
				<div class="timeChild">
					<span class="timeChild-label">删除时间:</span>
					<el-date-picker
						v-model="dateValue1"
						type="daterange"
						class="app-date-picker"
						size="large"
						value-format="YYYY-MM-DD"
						format="YYYY-MM-DD"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						@change="changeTime"
					/>
				</div>
				<div class="timeChild">
					<span class="timeChild-label">添加时间:</span>
					<el-date-picker
						v-model="dateValue2"
						type="daterange"
						class="app-date-picker"
						size="large"
						value-format="YYYY-MM-DD"
						format="YYYY-MM-DD"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					/>
				</div>
				<div class="timeChild">
					<span class="timeChild-label">标签:</span>
					 <span v-if="isRefresh">
    <span @click="showLabels" class="app-flex-2 app-choose-staff" v-if="tagData.length>1">
      <span class="app-flex-left">
        
        <span>{{ tagData[0].tag_name }}等{{tagData.length}}个标签</span>
      </span>
      <el-icon>
        <ArrowDown />
      </el-icon>
    </span>
    <span @click="showLabels" class="app-flex-2 app-choose-staff" v-else>
      <span class="app-flex-left" v-for="(item,index) in tagData" :key="index">
        <span>{{ item.tag_name }}</span>
      </span>
      <span v-if="tagData.length==0"></span>
      <el-icon>
        <ArrowDown />
      </el-icon>
		</span>
		 </span>

					<!-- <div class="Child2Style" @click="dialogClick">
						<div class="child2StyleIcon">
							<el-icon>
								<ArrowDown />
							</el-icon>
						</div>
					</div> -->
					<!-- 弹窗 -->
					<!-- <el-dialog v-model="dialogTableVisible" center title="请选择标签" width="600px">
						<div class="dialogStyle1">
							<div style="margin-top: 8px; margin-right: 5px">筛选条件:</div>
							<div>
								<el-radio-group v-model="radioValue" class="ml-4" @change="changeClick">
									<el-radio label="1" size="large">以下标签满足其中之一</el-radio>
									<el-radio label="2" size="large">以下标签同时满足</el-radio>
									<el-radio label="3" size="large">无任何标签</el-radio>
								</el-radio-group>
							</div>
						</div>
						<div style="margin-top: 5px" v-if="radioValue === '1' || radioValue === '2'">
							<el-input
								v-model="input1"
								class="w-50 m-2"
								size="large"
								placeholder="Please Input"
								:suffix-icon="Search"
							/>
						</div>
						<div v-if="radioValue === '1' || radioValue === '2'" style="height: 200px">
							<div style="margin-top: 12px">
								<div>ff:</div>
								<div class="filterStyle">
									<el-button plain v-for="i in 3">Plain</el-button>
								</div>
							</div>
							<div style="margin-top: 12px">
								<div>发生的发:</div>
								<div class="filterStyle">
									<el-button plain v-for="i in 3">Plain</el-button>
								</div>
							</div>
							<div style="margin-top: 12px">
								<div>11:</div>
								<div class="filterStyle">
									<el-button plain v-for="i in 3">Plain</el-button>
								</div>
							</div>
						</div>
						<div v-if="radioValue === '3'" style="font-size: 16px; height: 240px; color: #595959">
							选择无任何标签后，将筛选出没有被打上过任何标签的客户～
						</div>
						<div class="filterStyleBottom">
							<el-button>取消</el-button>
							<el-button type="primary" @click="preservation">保存</el-button>
						</div>
					</el-dialog> -->
				</div>
			</div>
			<div class="centerSelectChild2">
				<el-button @click="resetapi">重置</el-button>
				<el-button type="primary" @click="getData(1)">搜索</el-button>
			</div>
		</div>
		<!-- 表格部分 -->
		<div class="tableStyle">
			<div class="tableStyleTop">
				<div style="font-size: 14px; color: rgb(102, 102, 102); font-weight: bold">共{{total}}条数据</div>
				<div>
					<el-button type="primary" plain>导出Excel</el-button>
				</div>
			</div>
			<!-- table 部分-->
			<div>
				<el-table
					:data="tableData"
					style="width: 100%"
					:header-cell-style="{ color: '#909399', fontSize: '14px', backgroundColor: '#F7F9FA', padding: '10px 0' }"
					:cell-style="{ fontSize: '14px', padding: '20px 0' }"
				>
					<el-table-column prop="deleteCustomers" label="删除客户" width="290">
						<template #default="scope">
							<div style="display: flex; align-items: center">
								<div>
									<el-avatar shape="square" :src="scope.row.avatar" />
								</div>
								<span style="margin-left: 10px">{{ scope.row.name }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="label" label="标签">
						<template #default="scope">
						<el-tag v-if="scope.row.tag_info" class="mx-1" type="info" v-for="(item,index) in scope.row.tag_info" :key="index" effect="light">
								{{item }}
							</el-tag>
							<div v-else>-</div>
						</template>
					</el-table-column>
					<el-table-column prop="Operator" label="操作人">
						<template #default="scope">
							<div class="app-words-box">
								<div class="app-flex-left">
									<MyIcon class="app-down-icon primary-font" name="Person" />
									<span class="app-gap-words-left-xs">{{ scope.row.staff_name
 }}</span>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="lossing_time" label="删除时间" />
					<el-table-column prop="add_time" label="添加时间" />
					<el-table-column prop="operation" label="操作" width="150">
						<template #default="scope">
							<ul class="tableOperation">
								<!-- <li>聊天记录</li> -->
								<li @click="showDetail(scope.row.id)">详情</li>
							</ul>
						</template>
					</el-table-column>
				</el-table>
					<el-pagination style="margin-top:10px;margin-bottom:10px" :current-page="page" class="app-page" @current-change="getData" background layout="prev, pager, next" :total="total" />
			</div>
		</div>
		
	</div>
	<Detail1 ref="detail1" @diaUpdate="dialogVisible=true" />
	<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
	<labels ref="TestRef" :labeldataapi="labeldataapi"></labels>
</div>
</template>
<style>
.allStyle {
	margin: 0 20px;
}

.topStyle {
	background-color: #e6f0ff;
	height: 65px;
	border: 1px solid #7db3f2;
}
.centerSelectStyle {
	position: relative;

	display: flex;
	justify-content: space-between;
	height: 80px;
}

.centerSelectChild {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.timeChild {
	margin-left: 50px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.timeChild-label {
	margin-right: 10px;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.timeChildheader {
	display: flex;
	justify-content: flex-start;
}

.centerSelectChild2 {
	position: absolute;
	right: 20px;
	line-height: 80px;
}

.tableStyle {
	background-color: #ffffff;

	height: 700px;
	border-radius: 10px;
}

.tableStyleTop {
	display: flex;
	justify-content: space-between;
	height: 68px;
	line-height: 68px;
	margin: 0 20px;
}

.Child2Style {
	position: relative;
	margin-left: 5px;
	width: 203px;
	height: 32px;
	margin-top: 2px;
	border-radius: 5px;
	border: 1px solid #d9d9d9;
	background-color: #ffffff;
}

.Child2Content {
	position: absolute;
	top: -27px;
	padding-left: 5px;
	font-size: 14px;
	color: #999999;
}

.child2StyleIcon {
	position: absolute;
	right: 8px;
	top: 5px;
}

/* 弹窗 */
.dialogStyle1 {
	display: flex;
	justify-content: flex-start;
}
.filterStyle {
	display: flex;
	justify-content: flex-start;
	margin-top: 5px;
}
.filterStyleBottom {
	float: right;
	margin-top: 100px;
}
/* 功能 */
.table-operation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	margin: 20px;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-left {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-right {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-label {
	width: 110px;
}
.tableOperation {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.tableOperation li {
	font-size: 14px;
	color: #409eff;
	border-right: 1px solid #ebebeb;
	padding: 0 10px;
	height: 14px;
	line-height: 14px;
	cursor: pointer;
}
.tableOperation li:hover {
	color: #a0cfff;
}
.tableOperation li:first-child {
	padding-left: 0;
}
.tableOperation li:last-child {
	border-right: none;
}
.el-page-header {
  display:none;
}
</style>
